<template>
    <div class="main">
        <section>
            <div class="btn-block" v-if="rightsButtons['add']" >
                <router-link :to="{path: 'contractingParty/add',query: {id: '' }}">
                    <el-button type="success" size="small" icon="el-icon-circle-plus" plain >新建合同签约方</el-button>
                </router-link>
            </div>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="right" label-width="120px">
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="合同签约方：" prop="contractingPartyName">
                            <el-input @keyup.enter.native="search" v-model="listQuery.contractingPartyName" placeholder="合同签约方" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="纳税人识别码:" prop="taxpayerIdentifyNo">
                            <el-input @keyup.enter.native="search" v-model="listQuery.taxpayerIdentifyNo" placeholder="纳税人识别码"  clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="签约类型:" prop="contractingPartyType">
                            <el-select v-model="listQuery.contractingPartyType" clearable>
                                <el-option value="SMALL_TAXPAYER" label="小规模/仅简易征收"></el-option>
                                <el-option value="GENERAL_TAXPAYER" label="一般纳税人"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="是否有效:" prop="enable">
                            <el-select v-model="listQuery.enable" clearable>
                                <el-option :value="1" label="是"></el-option>
                                <el-option :value="0" label="否"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <div class="btn-block">
               <el-button type="primary" size="small" plain :loading="exportLoading" @click="exportList"  v-if="rightsButtons['export']">导出</el-button>
            </div>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="纳税人识别码" prop="taxpayerIdentifyNo"></el-table-column>
                <el-table-column align="center" label="合同签约方" prop="contractingPartyName"></el-table-column>
                <el-table-column align="center" label="合同签约方类型" prop="contractingPartyType">
                  <template slot-scope="scope">
                    {{scope.row.contractingPartyType | filterContractingPartyType}}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="是否营改增" prop="businessToAddedStatus">
                    <template slot-scope="scope">
                        <span>{{scope.row.businessToAddedStatus===1?'是':'否'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="税率%" prop="taxRate"></el-table-column>
                <el-table-column align="center" label="是否有效" prop="enable">
                    <template slot-scope="scope">
                        <span>{{scope.row.enable===1?'是':'否'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="发票量" prop="invoiceTotal"></el-table-column>
                <el-table-column align="center" label="发票功能" prop="invoiceType">
                  <template slot-scope="scope">
                    {{scope.row.invoiceType | filterInvoiceType}}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="开票限额" prop="invoiceQuotaType">
                   <template slot-scope="scope">
                    {{scope.row.invoiceQuotaType | filterInvoiceQuotaType}}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="购买方开票信息是否必填" prop="makeInvoiceStatus">
                    <template slot-scope="scope">
                        <span>{{scope.row.makeInvoiceStatus===1?'是':'否'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="新建人" prop="createOperator"></el-table-column>
                <el-table-column align="center" label="新建时间" prop="createAt"></el-table-column>
                <el-table-column align="center" label="修改人" prop="updateOperator"></el-table-column>
                <el-table-column align="center" label="修改时间" prop="updateAt"></el-table-column>
                <el-table-column align="center" label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="$router.push({ path: 'contractingParty/edit', query: {id: scope.row.id} })" v-if="rightsButtons['edit']">修改</el-button>
                        <el-button type="delete" size="mini" @click="deleteItem(scope.row.id)" v-if="rightsButtons['delete']">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="listQuery.pageNum"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="listQuery.pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>
<script>
export default {
    data() {
        const contractingPartyTypeTxt = [
          {label: '小规模/仅简易征收', value: 'SMALL_TAXPAYER' },
          {label: '一般纳税人', value: 'GENERAL_TAXPAYER' }
        ]
        return{
            list:[],
            listLoading:false,
            listQuery: {
                pageNum: 1,
                pageSize: 10,
                contractingPartyName:'',
                taxpayerIdentifyNo:'',
                contractingPartyType:'',
                enable:''
            },
            listTotal:0,
            exportLoading: false
        }
    },
    created() {
        this.getList()
    },
    methods: {
        search() {
            this.listQuery.pageNum =1
            this.getList()
        },
        // 清空搜索条件
        resetForm (formName) {
            this.$nextTick(() => {
                this.$refs[formName].resetFields()
            })
        },
        getList(){
            this.listLoading = true
            this.request({
                url: '/invoice-web-manage/invoice/contracting-party/search',
                method: 'post',
                data:this.listQuery
            }).then((res) => {
                this.list = res.data.list
                this.listTotal = res.data.total
                this.listLoading = false
            }).catch(err => {
                console.log(err)
                this.list = []
                this.listTotal = 0
                this.listLoading = false
            })
        },
        deleteItem(id) {
            this.$confirm('删除操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.request({
                        url: '/invoice-web-manage/invoice/contracting-party/delete?contractingPartyId='+id,
                        method: 'get'
                    }).then((res) => {
                    console.log(res)
                    if(res.code===200) {
                        this.$message.success('删除成功')
                        this.getList()
                    }
                    }).catch(err => {
                        console.log(err)

                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })

            console.log(id)
        },
        handleSizeChange (value) {
            this.listQuery.pageSize = value
            this.getList()
        },
        handleCurrentChange(val){
            this.listQuery.pageNum = val
            this.getList()
        },
        exportList() {
            this.exportLoading = true
            this.request({
            url: '/invoice-web-manage/invoice/contracting-party/export',
            method: 'post',
            data:this.listQuery,
            responseType: 'arraybuffer'
            }).then((data) => {
                let filename = `合同签约方.xls`
                this.downloadFile(data, filename)
                this.exportLoading = false
            }).catch(err => {
                console.log(err)
                this.exportLoading = false
            })
        }
    },
    filters: {
      filterContractingPartyType(val){
        const contractingPartyTypeTxt = [
          {label: '小规模/仅简易征收', value: 'SMALL_TAXPAYER' },
          {label: '一般纳税人', value: 'GENERAL_TAXPAYER' }
        ]
        const index = contractingPartyTypeTxt.findIndex(i => i.value === val)
        if (index > -1) {
          return contractingPartyTypeTxt[index].label
        }
        return ''
      },
      filterInvoiceType(val){
        const invoiceTypeTxt = [
          {label: '电子发票', value: 'ELECTRONIC_INVOICE' },
          {label: '纸质发票', value: 'PAPER_INVOICE' }
        ]
        const index = invoiceTypeTxt.findIndex(i => i.value === val)
        if (index > -1) {
          return invoiceTypeTxt[index].label
        }
        return ''
      },
      filterInvoiceQuotaType(val){
        const invoiceQuotaType = [
          {label: '千元版', value: 'ONE_THOUSAND' },
          {label: '万元版', value: 'TEN_THOUSAND' },
          {label: '十万元版', value: 'ONE_HUNDRED_THOUSAND' },
          {label: '百万元版', value: 'MILLION' },
        ]
        const index = invoiceQuotaType.findIndex(i => i.value === val)
        if (index > -1) {
          return invoiceQuotaType[index].label
        }
        return ''
      }
    }
}
</script>
